<template>
  <div class="absolute w-full h-full bg-[#f0f8ff] overflow-hidden z-0 top-0 left-0 transition-all duration-300" style="background-color: #f0f8ff;">
    <canvas ref="particleCanvas" class="particle-canvas"></canvas>
    <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-center text-[#333] z-10 pointer-events-none">
      <h1 class="text-6xl font-bold mb-6 text-[#4682b4] shadow-lg tracking-wider">欢迎使用工具集</h1>
      <p class="text-3xl text-[#4682b4] opacity-90 shadow-sm">高效便捷的在线工具平台</p>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const particleCanvas = ref(null)
let animationFrameId = null
let particles = []
let mousePosition = { x: null, y: null }

const initParticles = () => {
  const canvas = particleCanvas.value
  const container = canvas.parentElement
  canvas.width = container.clientWidth
  canvas.height = container.clientHeight
  
  // 创建粒子
  particles = []
  const particleCount = Math.floor((canvas.width * canvas.height) / 10000)
  
  for (let i = 0; i < particleCount; i++) {
    particles.push({
      x: Math.random() * canvas.width,
      y: Math.random() * canvas.height,
      size: Math.random() * 3 + 1,
      speedX: Math.random() * 2 - 1,
      speedY: Math.random() * 2 - 1,
      color: `rgba(70, 130, 180, ${Math.random() * 0.5 + 0.1})`
    })
  }
}

const animate = () => {
  const canvas = particleCanvas.value
  if (!canvas) return
  
  const ctx = canvas.getContext('2d')
  if (!ctx) return
  
  // 清除画布
  ctx.clearRect(0, 0, canvas.width, canvas.height)
  
  // 更新和绘制粒子
  particles.forEach(particle => {
    // 更新位置
    particle.x += particle.speedX
    particle.y += particle.speedY
    
    // 边界检查
    if (particle.x < 0 || particle.x > canvas.width) particle.speedX *= -1
    if (particle.y < 0 || particle.y > canvas.height) particle.speedY *= -1
    
    // 鼠标交互
    if (mousePosition.x && mousePosition.y) {
      const dx = particle.x - mousePosition.x
      const dy = particle.y - mousePosition.y
      const distance = Math.sqrt(dx * dx + dy * dy)
      
      if (distance < 100) {
        const angle = Math.atan2(dy, dx)
        const force = (100 - distance) / 50
        particle.x += Math.cos(angle) * force
        particle.y += Math.sin(angle) * force
      }
    }
    
    // 绘制粒子
    ctx.fillStyle = particle.color
    ctx.beginPath()
    ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2)
    ctx.fill()
  })
  
  animationFrameId = requestAnimationFrame(animate)
}

const handleMouseMove = (event) => {
  if (!particleCanvas.value) return
  const rect = event.currentTarget.getBoundingClientRect()
  mousePosition.x = event.clientX - rect.left
  mousePosition.y = event.clientY - rect.top
}

const handleMouseLeave = () => {
  mousePosition.x = null
  mousePosition.y = null
}

const handleResize = () => {
  const canvas = particleCanvas.value
  if (!canvas || !canvas.parentElement) return
  const container = canvas.parentElement
  canvas.width = container.clientWidth
  canvas.height = container.clientHeight
  initParticles()
}

onMounted(() => {
  initParticles()
  animate()
  particleCanvas.value.parentElement.addEventListener('mousemove', handleMouseMove)
  particleCanvas.value.parentElement.addEventListener('mouseleave', handleMouseLeave)
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  if (animationFrameId) {
    cancelAnimationFrame(animationFrameId)
    animationFrameId = null
  }
  if (particleCanvas.value && particleCanvas.value.parentElement) {
    particleCanvas.value.parentElement.removeEventListener('mousemove', handleMouseMove)
    particleCanvas.value.parentElement.removeEventListener('mouseleave', handleMouseLeave)
  }
  window.removeEventListener('resize', handleResize)
})
</script>

<style scoped>
.particle-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
</style>